import './style/global.less';
import React, { useEffect, useMemo, useState } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConfigProvider, Empty, Typography } from '@arco-design/web-react';
import enUS from '@arco-design/web-react/es/locale/en-US';
import arEG from '@arco-design/web-react/es/locale/ar-EG';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import store from './store';
import PageLayout from './layout';
import { GlobalContext } from './context';
import Login from './pages/login';
import checkLogin from './utils/checkLogin';
import changeTheme from './utils/changeTheme';
import useStorage from './utils/useStorage';
import locale from './locale';
import PngEmpty from '@/assets/empty.png';
import { Profile } from './api/modules';
import ErrorBound from './ErrorBound';

function Index() {
  const [lang, setLang] = useStorage('arco-lang', 'ar-EG');

  useMemo(() => {
    const systemLanguage = lang || navigator.language;
    switch (systemLanguage) {
      case 'en-US':
      case 'ar-EG':
        setLang(systemLanguage);
        return;
      default:
        setLang('ar-EG');
        return;
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const [theme, setTheme] = useStorage('arco-theme', 'light');
  const [rtl, setRtl] = useState(lang === 'ar-EG');

  const Calendar = {
    formatYear: 'YYYY',
    formatMonth: 'MMMM YYYY',
    monthBeforeYear: true,
    today: 'اليوم',
    view: {
      month: 'شهر',
      year: 'عام',
      week: 'أسبوع',
      day: 'يوم',
    },
    month: {
      long: {
        January: 'يناير',
        February: 'فبراير',
        March: 'مارس',
        April: 'أبريل',
        May: 'مايو',
        June: 'يونيو',
        July: 'يوليه',
        August: 'أغسطس',
        September: 'سبتمبر',
        October: 'أكتوبر',
        November: 'نوفمبر',
        December: 'ديسمبر',
      },
      short: {
        January: 'يناير',
        February: 'فبراير',
        March: 'مارس',
        April: 'أبريل',
        May: 'مايو',
        June: 'يونيو',
        July: 'يوليه',
        August: 'أغسطس',
        September: 'سبتمبر',
        October: 'أكتوبر',
        November: 'نوفمبر',
        December: 'ديسمبر',
      },
    },
    week: {
      long: {
        self: 'أسبوع',
        monday: 'الجمعة',
        tuesday: 'الخميس',
        wednesday: 'الأربعاء',
        thursday: 'الثلاثاء',
        friday: 'الإثنين',
        saturday: 'السبت',
        sunday: 'الأحد',
      },
      short: {
        self: 'أسبوع',
        monday: 'الجمعة',
        tuesday: 'الخميس',
        wednesday: 'الأربعاء',
        thursday: 'الثلاثاء',
        friday: 'الإثنين',
        saturday: 'السبت',
        sunday: 'الأحد',
      },
    },
  };
  function getArcoLocale() {
    switch (lang) {
      case 'en-US':
        return {
          ...enUS,
          ColorPicker: {
            // 设置ColorPicker相关的属性
          },
        };
      case 'ar-EG':
        return {
          ...arEG,
          Calendar: Calendar,
          DatePicker: {
            Calendar: Calendar,
            placeholder: {
              date: 'الرجاء تحديد تاريخ',
              week: 'الرجاء تحديد أسبوع',
              month: 'الرجاء تحديد شهر',
              year: 'الرجاء تحديد عام',
              quarter: 'الرجاء تحديد ربع',
            },
            placeholders: {
              date: ['تاريخ البدء', 'تاريخ الانتهاء'],
              week: ['أسبوع البدء', 'نهاية الأسبوع'],
              month: ['شهر البدء', 'نهاية الشهر'],
              year: ['سنة البدء', 'نهاية عام'],
              quarter: ['بداية ربع السنة', 'نهاية الربع'],
            },
            selectTime: 'فترة الاختيار',
            selectDate: 'حدد تاريخ',
            today: 'اليوم',
            now: 'الآن',
            ok: 'موافق',
          },
          ColorPicker: {
            // 设置ColorPicker相关的属性
          },
        };
      default:
        return {
          ...arEG,
          ColorPicker: {
            // 设置ColorPicker相关的属性
          },
        };
    }
  }

  useEffect(() => {
    setRtl(lang === 'ar-EG');
  }, [lang]);

  // 树状数据扁平化
  const getTableData = (data, parentName = '') => {
    return data.reduce(
      (
        arr = [],
        {
          id = '',
          name = '',
          type = '',
          url = '',
          children = [],
          checked = false,
        }
      ) => {
        const newName = url && url.replace(/\s/g, '').toLowerCase();
        return arr.concat(
          [
            {
              id,
              type,
              url,
              name: newName,
              children,
              parentName,
              checked,
              code: name,
            },
          ],
          getTableData(children || [], newName)
        );
      },
      []
    );
  };

  function fetchUserInfo() {
    Profile().then((res) => {
      const meuns = new Set();
      const actions = new Set();
      if (res.data.menus) {
        const arr = getTableData(res.data.menus);
        arr.forEach((a) => {
          if (!!a.url) {
            if (a.type !== 'MENU' && a.checked) {
              const name = a.url;
              meuns.add(name.toLowerCase());
            }

            // 按钮操作权限，code就是URL
            if (a.type !== 'MENU' && a.checked) {
              const name = (a.parentName ? a.parentName + '.' : '') + a.name;
              actions.add(name);
            }
          }
        });
      }
      store.dispatch({
        type: 'update-meunsAndActions',
        payload: {
          meuns: Array.from(meuns),
          actions: Array.from(actions),
          roles: res.data.roles,
        },
      });
      store.dispatch({
        type: 'update-userInfo',
        payload: { userInfo: res.data },
      });
    });
  }
  useEffect(() => {
    if (checkLogin()) {
      fetchUserInfo();
    } else if (window.location.pathname.replace(/\//g, '') !== 'login') {
      window.location.replace('/login');
    }
  }, []);

  useEffect(() => {
    changeTheme(theme);
  }, [theme]);

  const contextValue = {
    lang,
    setLang,
    theme,
    setTheme,
    rtl,
    setRtl,
  };
  const t = locale[lang];

  function renderEmpty(componentName) {
    switch (componentName) {
      case 'Cascader':
        return <Typography.Text>{t['empty.noResult']}</Typography.Text>;

      case 'Select':
        return <Empty description={t['empty.noResult']} icon={<></>} />;

      case 'TreeSelect':
        return <Typography.Text>{t['empty.noResult']}</Typography.Text>;

      case 'List':
        return <Empty description={t['empty.noData']} />;

      case 'Table':
        return (
          <Empty
            // imgSrc={PngEmpty}
            icon={<img style={{ width: 200, height: 'auto' }} src={PngEmpty} />}
            description={t['empty.noData']}
          />
        );

      default:
        return <Empty />;
    }
  }
  return (
    <ErrorBound>
      <BrowserRouter>
        <ConfigProvider
          rtl={rtl}
          locale={getArcoLocale()}
          renderEmpty={renderEmpty}
          focusLock={{ modal: false }}
          componentConfig={{
            Card: {
              bordered: false,
            },
            List: {
              bordered: false,
            },
            Table: {
              border: false,
            },
          }}
        >
          <Provider store={store}>
            <GlobalContext.Provider value={contextValue}>
              <Switch>
                <Route path="/login" component={Login} />
                <Route path="/" component={PageLayout} />
              </Switch>
            </GlobalContext.Provider>
          </Provider>
        </ConfigProvider>
      </BrowserRouter>
    </ErrorBound>
  );
}

ReactDOM.render(<Index />, document.getElementById('root'));
